<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/放大镜.css">
</head>

<body>
    <div class="container">
        <div class="small">
            <!-- 贴膜 -->
            <div class="wrap"></div>
            <!-- 左侧放大镜图片 -->
            <img src="./img/timg.jpg" alt="">
            <!-- 小盒子 -->
            <span class="grayBox"></span>
        </div>
        <div class="choice-btn">
            <img src="./img/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg"
                alt="">
        </div>
    </div>
    <!-- 大图容器 -->
    <div class="big">
        <!-- 大图图片 -->
        <img src="./img/timg.jpg" alt="">
    </div>
</body>
<script>
    function fun() {
        this.small_box = document.querySelector('.small')
        this.small_img = document.querySelector(".small img")
        this.span = document.querySelector('.grayBox')
        this.big_box = document.querySelector('.big')
        this.big_img = document.querySelector('.big img')
        this.change_box = document.querySelector('.choice-btn')
        //小盒子容器宽高
        this.small_box_size = {
            width: parseInt(getComputedStyle(this.small_box).width),
            height: parseInt(getComputedStyle(this.small_box).height)
        }
        //大盒子容器宽高
        this.big_box_size = {
            width: parseInt(getComputedStyle(this.big_box).width),
            height: parseInt(getComputedStyle(this.big_box).height)
        }
        //放大的区域
        this.span_size = {
            width: parseInt(getComputedStyle(this.span).width),
            height: parseInt(getComputedStyle(this.span).height)
        }
        //小图片宽高
        this.small_img_size = {
            width: parseInt(getComputedStyle(this.small_img).width),
            height: parseInt(getComputedStyle(this.small_img).height)
        }
        //大图片宽高
        this.big_img_size = {
            width: parseInt(getComputedStyle(this.big_img).width),
            height: parseInt(getComputedStyle(this.big_img).height),
        }
        this.blow_up()
    }
    fun.prototype.blow_up = function () {
        var self = this
        this.small_box.onmouseover = function () {
            self.span.style.display = 'block'
            self.big_box.style.display = 'block'
        }
        this.small_box.onmouseout = function () {
            self.span.style.display = 'none'
            self.big_box.style.display = 'none'
        }
        self.small_box.onmousemove = function (e) {
            var e = e || window.event
            var _left = e.offsetX - 50
            var _top = e.offsetY - 50
            if (_left < 0) {
                _left = 0
            }
            if (_top < 0) {
                _top = 0
            }

            //判断右边的临界值
            var max_left = self.small_box_size.width - self.span_size.width
            if (_left > max_left) {
                _left = max_left
            }
            var max_top = self.small_box_size.height - self.span_size.height
            if (_top > max_top) {
                _top = max_top
            }
            self.span.style.left = _left + 'px'
            self.span.style.top = _top + 'px'


            // 下面这里是把图片放大
            // 设置属性，改变定位的值
            self.big_img.setAttribute("style", `left : ${-_left * 4}px;top:${-_top * 4}px`)

        }
        // 事件委托切换图片
        self.change_box.onmouseover = function (e) {
            var e = e || window.event
            var tar = e.target
            if (tar.src) {
                self.small_img.src = tar.src
                self.big_img.src = tar.src
            }
        }

    }
    var instance = new fun()
</script>

</html>